// 审批节点
<template>
  <div class="t_drawer_body">
    <Tabs class="t_tabs" :tabBarStyle="{ height: '45px' }">
      <TabPane key="1" tab="基础设置">
        <t_tab_container>
          <div class="tab_content">
            <fieldLabel>标题设置</fieldLabel>
            <Input v-model="data.title" />
            <fieldLabel>审批设置</fieldLabel>
            <RadioGroup v-model="data.assigneeType">
              <Row>
                <Col span="6">
                  <Radio :value="1">指定人员</Radio>
                </Col>
                <Col span="6">
                  <Radio :value="2">发起者主管</Radio>
                </Col>
                <Col span="6">
                  <Radio :value="3">发起者本人</Radio>
                </Col>
                <Col span="6">
                  <Radio :value="4">部门主管</Radio>
                </Col>
                <Col span="6">
                  <Radio :value="5">变量</Radio>
                </Col>
                <Col span="6">
                  <Radio :value="6">环节</Radio>
                </Col>
                <Col span="6">
                  <Radio :value="7">服务</Radio>
                </Col>
              </Row>
            </RadioGroup>
            <p class="hint">{{ settingHint }}</p>
            <template v-if="data.assigneeType === 1">
              <chooserRole
                :requestConfig="requestConfig"
                ref="approverRole"
                :propsSelected="data.approverRole"
              />
              <chooserPerson
                :requestConfig="requestConfig"
                ref="approvers"
                :propsSelected="data.approvers"
              />
            </template>
            <template v-if="data.assigneeType === 2">
              <fieldLabel>发起者的</fieldLabel>
              <Select style="width: 100%" v-model="data.managerLevel">
                <SelectOption :value="1"> 直接主管 </SelectOption>
                <SelectOption :value="2"> 第2级主管 </SelectOption>
                <SelectOption :value="3"> 第3级主管 </SelectOption>
                <SelectOption :value="4"> 第4级主管 </SelectOption>
              </Select>
            </template>
            <template v-if="data.assigneeType === 5">
              <fieldLabel>表单字段</fieldLabel>
              <Select style="width: 100%" v-model="data.formField">
                <SelectOption
                  v-for="item in customFields"
                  :key="item.fieldId"
                  :value="item.fieldId"
                  >{{ item.fieldName }}</SelectOption
                >
              </Select>
            </template>
            <template v-if="data.assigneeType === 6">
              <fieldLabel>审批环节</fieldLabel>
              <Select style="width: 100%" v-model="data.nodeId">
                <SelectOption
                  v-for="item in approvalNodes"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.name }}</SelectOption
                >
              </Select>
            </template>
            <template v-if="data.assigneeType === 7">
              <fieldLabel>请求路径</fieldLabel>
              <Input
                addon-before="GET"
                placeholder="请输入接口地址"
                v-model="data.getUserUrl"
              />
            </template>

            <fieldLabel>审批方式</fieldLabel>
            <RadioGroup v-model="r_type">
              <Radio :value="1">或签（一名审批人同意或拒绝即可）</Radio>
              <Radio :value="2"
                >会签（无序会签，当审批达到会签比例时，则该审批通过）</Radio
              >
            </RadioGroup>
            <template v-if="r_type === 2">
              <fieldLabel>会签比例</fieldLabel>
              <Row>
                <Col span="6"
                  ><ButtonGroup size="small">
                    <Button @click="decline(1)">-</Button>
                    <Button @click="increase(1)">+</Button></ButtonGroup
                  ></Col
                >
                <Col span="18"
                  ><Progress :percent="percent1" status="active"
                /></Col>
              </Row>
            </template>
            <fieldLabel>加签设置</fieldLabel>
            <Checkbox
              :checked="data.counterSign"
              @change="(e) => (data.counterSign = e.target.checked)"
              >允许加签</Checkbox
            >
            <fieldLabel>进度设置</fieldLabel>
            <Row>
              <Col span="6"
                ><ButtonGroup size="small">
                  <Button @click="decline(2)">-</Button>
                  <Button @click="increase(2)">+</Button>
                </ButtonGroup></Col
              >
              <Col span="18"
                ><Progress :percent="percent2" status="active"
              /></Col>
            </Row>
            <fieldLabel>抄送设置</fieldLabel>
            <div class="cc_setting">
              <chooserRole
                :requestConfig="requestConfig"
                ref="circulateRole"
                :propsSelected="data.circulateRole"
              />
              <chooserPerson
                :requestConfig="requestConfig"
                ref="circulateUser"
                :propsSelected="data.circulateUser"
              />
              <Checkbox
                :checked="data.isCustomCopy"
                @change="(e) => (data.isCustomCopy = e.target.checked)"
                >自定义抄送人</Checkbox
              >
            </div>
          </div>
        </t_tab_container>
      </TabPane>
      <TabPane key="2" tab="高级设置" force-render>
        <t_tab_container>
          <div class="tab_content">
            <fieldLabel>操作设置</fieldLabel>
            <div class="action_group">
              <Checkbox
                :checked="data.hasAuditBtn"
                @change="(e) => (data.hasAuditBtn = e.target.checked)"
                class="custom_checkbox"
                >同意</Checkbox
              >
              <Input v-model="data.auditBtnText" />
            </div>
            <div class="action_group">
              <Checkbox
                :checked="data.hasRejectBtn"
                @change="(e) => (data.hasRejectBtn = e.target.checked)"
                class="custom_checkbox"
                >驳回</Checkbox
              >
              <Input v-model="data.rejectBtnText" />
            </div>
            <div class="action_group">
              <Checkbox
                :checked="data.hasRevokeBtn"
                @change="(e) => (data.hasRevokeBtn = e.target.checked)"
                class="custom_checkbox"
                >撤回</Checkbox
              >
              <Input v-model="data.revokeBtnText" />
            </div>
            <div class="action_group">
              <Checkbox
                :checked="data.hasTransferBtn"
                @change="(e) => (data.hasTransferBtn = e.target.checked)"
                class="custom_checkbox"
                >转办</Checkbox
              >
              <Input v-model="data.transferBtnText" />
            </div>
            <div class="action_group">
              <Checkbox
                :checked="data.hasSign"
                @change="(e) => (data.hasSign = e.target.checked)"
                class="custom_checkbox"
                >签名</Checkbox
              >
            </div>
            <div class="action_group">
              <Checkbox
                :checked="data.hasPrintBtn"
                @change="(e) => (data.hasPrintBtn = e.target.checked)"
                class="custom_checkbox"
                >打印</Checkbox
              >
              <Input v-model="data.printBtnText" />
            </div>
            <fieldLabel>驳回设置</fieldLabel>
            <Select style="width: 100%" v-model="data.rejectStep">
              <SelectOption value="1"> 上一审批人 </SelectOption>
              <SelectOption value="2"> 发起人 </SelectOption>
              <SelectOption value="3"> 主管审批 </SelectOption>
              <SelectOption value="4"> 审批节点 </SelectOption>
            </Select>
            <fieldLabel>打印设置</fieldLabel>
            <Select style="width: 100%" v-model="data.printId"> </Select>
            <fieldLabel>通知设置</fieldLabel>
            <CheckboxGroup v-model="data.messageType">
              <Checkbox :value="1">站内信</Checkbox>
              <Checkbox :value="2">邮箱</Checkbox>
              <Checkbox :value="3">短信</Checkbox>
              <Checkbox :value="4">钉钉</Checkbox>
              <Checkbox :value="5">企业邮箱</Checkbox>
            </CheckboxGroup>
            <fieldLabel>说明</fieldLabel>
            <TextArea
              v-model="data.description"
              placeholder="请输入说明"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </div>
        </t_tab_container>
      </TabPane>
      <TabPane key="3" tab="节点事件">
        <t_tab_container>
          <div class="tab_content">
            <fieldLabel>自定义同意事件</fieldLabel>
            <A_Switch v-model="data.hasApproverFunc" />
            <template v-if="data.hasApproverFunc">
              <fieldLabel>同意事件请求路径</fieldLabel>
              <Input
                addon-before="GET"
                placeholder="请输入接口地址"
                v-model="data.approverInterfaceUrl"
              />
            </template>
            <fieldLabel>自定义拒绝事件</fieldLabel>
            <A_Switch v-model="data.hasApproverRejectFunc" />
            <template v-if="data.hasApproverRejectFunc">
              <fieldLabel>拒绝事件请求路径</fieldLabel>
              <Input
                addon-before="GET"
                placeholder="请输入接口地址"
                v-model="data.approverRejectInterfaceUrl"
              />
            </template>
            <fieldLabel>自定义撤回事件</fieldLabel>
            <A_Switch v-model="data.hasRecallFunc" />
            <template v-if="data.hasRecallFunc">
              <fieldLabel>撤回事件请求路径</fieldLabel>
              <Input
                addon-before="GET"
                placeholder="请输入接口地址"
                v-model="data.recallInterfaceUrl"
              />
            </template>
          </div>
        </t_tab_container>
      </TabPane>
    </Tabs>
    <div class="t_buttom_group">
      <Button style="margin-right: 10px" @click="() => $emit('close')"
        >取消</Button
      >
      <Button type="primary" @click="confirm">确定</Button>
    </div>
  </div>
</template>

<script>
import t_tab_container from "./components/t_tab_container.vue";
import fieldLabel from "./components/fieldLabel.vue";
import chooserRole from "./components/chooserRole.vue";
import chooserPerson from "./components/chooserPerson.vue";
import EventBus from "../eventBus";
import message from "ant-design-vue/lib/message";
import { verify_e } from "../../utils/verify";

import Button from "ant-design-vue/lib/button/button";
import Tabs from "ant-design-vue/lib/tabs";
import ButtonGroup from "ant-design-vue/lib/button/button-group";
import Input from "ant-design-vue/lib/input";
import Row from "ant-design-vue/lib/row";
import Col from "ant-design-vue/lib/col";
import Radio, { Group as RadioGroup } from "ant-design-vue/lib/radio";
import Progress from "ant-design-vue/lib/progress";
import Checkbox from "ant-design-vue/lib/checkbox";
import A_Switch from "ant-design-vue/lib/switch/index";
import Select from "ant-design-vue/lib/select";
import TextArea from "ant-design-vue/lib/input/TextArea";

const { TabPane } = Tabs;
const { Option } = Select;
const SelectOption = Option;
const { Group } = Checkbox;
const CheckboxGroup = Group;
export default {
  components: {
    t_tab_container,
    fieldLabel,
    chooserRole,
    chooserPerson,
    Button,
    ButtonGroup,
    Tabs,
    TabPane,
    Input,
    Row,
    Col,
    Radio,
    RadioGroup,
    Progress,
    Checkbox,
    CheckboxGroup,
    A_Switch,
    Select,
    SelectOption,
    TextArea,
  },

  props: {
    nodeData: Object,
    customFields: Array,
    approvalNodes: Array,
    requestConfig: Object,
  },

  computed: {
    settingHint() {
      switch (this.data.assigneeType) {
        case 1:
          return "指定审批人处理审批单";
        case 2:
          return "发起者主管将作为审批人处理审批单";
        case 3:
          return "发起者自己将作为审批人处理审批单";
        case 4:
          return "发起者的部门主管将作为审批人处理审批单";
        case 5:
          return "选择流程表单字段的值作为审批人";
        case 6:
          return "设置审批人为审批流程中某个环节的审批人";
        case 7:
          return "通过第三方调用从目标服务中获取审批人";
        default:
          return "";
      }
    },
  },
  data() {
    return {
      data: JSON.parse(JSON.stringify(this.nodeData.dataProps)),
      explain: "",
      r_person: 1,
      r_type: this.get_r_type(this.nodeData.dataProps),
      percent1: this.nodeData.dataProps.countersignRatio,
      percent2: Number(this.nodeData.dataProps.progress),
    };
  },

  watch: {
    percent1(val) {
      this.data.countersignRatio = val;
    },
    percent2(val) {
      this.data.progress = val + "";
    },
    r_type(val) {
      if (val === 1) {
        this.data.noApproverHandler = true; //是否或签
        this.data.hasFreeApprover = false; //是否会签
      } else {
        this.data.noApproverHandler = false; //是否或签
        this.data.hasFreeApprover = true; //是否会签
      }
    },
    "data.hasApproverFunc": function (val) {
      if (!val) {
        this.data.approverInterfaceUrl = "";
      }
    },
    "data.hasApproverRejectFunc": function (val) {
      if (!val) {
        this.data.approverRejectInterfaceUrl = "";
      }
    },
    "data.hasRecallFunc": function (val) {
      if (!val) {
        this.data.recallInterfaceUrl = "";
      }
    },
  },

  methods: {
    get_r_type(props) {
      if (props.noApproverHandler) {
        return 1;
      }
      if (props.hasFreeApprover) {
        return 2;
      }
    },
    increase(key) {
      let percent = this["percent" + key] + 10;
      if (percent > 100) {
        percent = 100;
      }
      this["percent" + key] = percent;
    },
    decline(key) {
      let percent = this["percent" + key] - 10;
      if (percent < 0) {
        percent = 0;
      }
      this["percent" + key] = percent;
    },

    confirm() {
      let copyData = JSON.parse(JSON.stringify(this.data));
      let approvers = []; //审批人员
      let approverRole = []; //审批角色
      let circulateRole = []; //抄送角色
      let circulateUser = []; //抄送人员
      if (this.$refs.approvers) {
        approvers = this.$refs.approvers.getSelectedData();
      }
      if (this.$refs.approverRole) {
        approverRole = this.$refs.approverRole.getSelectedData();
      }
      if (this.$refs.circulateRole) {
        circulateRole = this.$refs.circulateRole.getSelectedData();
      }
      if (this.$refs.circulateUser) {
        circulateUser = this.$refs.circulateUser.getSelectedData();
      }
      copyData.approvers = [...approvers];
      copyData.approverRole = [...approverRole];
      copyData.circulateRole = [...circulateRole];
      copyData.circulateUser = [...circulateUser];

      let verifyInfo = verify_e(copyData);
      if (verifyInfo.pass) {
        EventBus.$emit("UPDATE_NODE", {
          nodeId: this.nodeData.nodeId,
          path: this.nodeData.path,
          dataProps: copyData,
        });
        this.$emit("close");
      } else {
        message.warning(verifyInfo.message.join("、"));
      }
    },
  },
};
</script>

<style scoped>
.t_drawer_body {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 55px);
}

.t_tabs {
  flex: 1;
}

.t_buttom_group {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}
.tab_content {
  padding: 0 24px;
}

.hint {
  font-size: 14px;
  color: #a5a5a5;
}

.cc_setting {
  display: flex;
  flex-direction: column;
}

.cust_btn_sty {
  width: 120px;
  margin-bottom: 10px;
}

.action_group {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.custom_checkbox {
  width: 100px;
}
</style>